<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" type="text/css" href="css/shopping.css" />
    <link rel="stylesheet" href="css/index.css">
    <script src="JavaScript/index.js"></script>

</head>

<body>
    <!-- nav -->
    <header id="nav">
        <div class="navbar-container">
            <div class="logo" id="name"><img src="images/index/logo.png" alt="logo"></div>
            <nav>
                <ul class="nav-center">
                    <li><a href="index.html">首页</a></li>
                    <li><a
                            href="https://www.bilibili.com/video/BV1NbEozvEm4/?spm_id_from=333.1387.homepage.video_card.click">讲解视频</a>
                    </li>
                    <li><a href="#foot">仓库</a></li>
                    <li><a href="about.html">关于我们</a></li>
                </ul>
            </nav>
            <div class="right">
                <a href="#">登录</a>
            </div>
            <div id="menu-toggle" class="menu-toggle">☰</div>
        </div>

        <div id="mobile" class="mobile-nav">
            <a href="index.html">首页</a>
            <a
                href="https://www.bilibili.com/video/BV1NbEozvEm4/?spm_id_from=333.1387.homepage.video_card.click">讲解视频</a>
            <a href="#foot">仓库</a>
            <a href="about.html">关于我们</a>
            <a href="#">登录</a>
        </div>
    </header>
    <!-- nav -->

    <!-- banner -->
    <section>
        <div class="banner">
            <img src="images/index/banner.jpg" alt="">
        </div>
    </section>
    <!-- banner -->


    <!-- 商品展示区 -->
    <section class="product-section">
        <div class="container">
            <div class="product-container">
                <div class="product-gallery">
                    <img src="./images/shopping/1.webp" alt="商品主图" class="main-image">
                    <div class="thumbnail-container">
                        <img src="./images/shopping/1.webp" alt="商品缩略图1" class="thumbnail">
                        <img src="./images/shopping/2.webp" alt="商品缩略图2" class="thumbnail">
                        <img src="./images/shopping/3.webp" alt="商品缩略图3" class="thumbnail">
                        <img src="./images/shopping/4.webp" alt="商品缩略图4" class="thumbnail">
                    </div>
                </div>

                <div class="product-info">
                    <h1 class="product-title">Pimax Crystal Light调光版合约机</h1>
                    <p class="product-brand">品牌: <span>Pimax</span></p>

                    <div class="price-container">
                        <span class="current-price">¥4899</span>
                        <span class="original-price">¥6999</span>
                        <span class="discount">7折</span>
                    </div>

                    <div class="product-description">
                        <p>每只眼睛拥有 2880 x 2880 的超清晰分辨率。大甜点玻璃非球面镜片。35 PPD 带来超清晰的视觉效果。可变刷新率（72Hz、90Hz、120Hz）提供流畅的游戏体验。手动调节
                            IPD（58-72 毫米）。
                            蜂窝状渲染： 固定 2.0。使用内向外跟踪功能轻松设置，或使用灯塔跟踪功能进行扩展。音频：可互换的 3.5 毫米插孔，2 倍麦克风</p>
                    </div>

                    <div class="color-options">
                        <div class="option-title">颜色选择</div>
                        <div class="color-option active">黑色</div>
                        <div class="color-option">白色</div>
                        <div class="color-option">灰色</div>
                    </div>

                    <div class="quantity-selector">
                        <div class="option-title">数量</div>
                        <button class="quantity-btn">-</button>
                        <input type="number" value="1" min="1" class="quantity-input">
                        <button class="quantity-btn">+</button>
                    </div>

                    <div class="product-actions">
                        <button class="add-to-cart">加入购物车</button>
                        <button class="wishlist-btn">加入收藏</button>
                    </div>

                    <div class="product-meta">
                        <div class="meta-item">库存: <span>有货</span></div>
                        <div class="meta-item">销量: <span>2568件</span></div>
                        <div class="meta-item">评分: <span>★★★★★ (4.9/5)</span></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 商品详情选项卡 -->
    <section class="product-tabs">
        <div class="container">
            <div class="tab-header">
                <button class="tab-btn active">商品详情</button>
                <button class="tab-btn">规格参数</button>
                <button class="tab-btn">配置要求</button>
                <button class="tab-btn">售后服务</button>
            </div>

            <div class="tab-content">
                <div class="tab-panel active">
                    <h3>商品详情</h3>
                    <img src="images/shopping/5.webp" style="width:100%;">
                    <img src="images/shopping/6.webp" style="width:100%;">
                    <img src="images/shopping/7.webp" style="width:100%;">
                    <img src="images/shopping/8.webp" style="width:100%;">
                    <img src="images/shopping/9.webp" style="width:100%;">
                    <img src="images/shopping/10.webp" style="width:100%;">
                    <img src="images/shopping/11.webp" style="width:100%;">
                </div>

                <div class="tab-panel">
                    <h3>规格参数</h3>
                    <table style="width:100%; border-collapse: collapse;">
                        <tr>
                            <td style="padding:10px; border-bottom:1px solid #eee; width:30%;">产品名称</td>
                            <td style="padding:10px; border-bottom:1px solid #eee;">Pimax Crystal Light VR头显</td>
                        </tr>
                        <tr>
                            <td style="padding:10px; border-bottom:1px solid #eee;">型号</td>
                            <td style="padding:10px; border-bottom:1px solid #eee;">Pimax Crystal Light</td>
                        </tr>
                        <tr>
                            <td style="padding:10px; border-bottom:1px solid #eee;">音频</td>
                            <td style="padding:10px; border-bottom:1px solid #eee;">可互换的 3.5 毫米插孔，2 倍麦克风</td>
                        </tr>
                        <tr>
                            <td style="padding:10px; border-bottom:1px solid #eee;">渲染</td>
                            <td style="padding:10px; border-bottom:1px solid #eee;">蜂窝状渲染： 固定 2.0</td>
                        </tr>
                        <tr>
                            <td style="padding:10px; border-bottom:1px solid #eee;">分辨率</td>
                            <td style="padding:10px; border-bottom:1px solid #eee;">
                                双目8K单眼分辨率2880*2880，高达35PPD清晰度，重量对比水晶Crystal减轻约30%以上</td>
                        </tr>
                        <tr>
                            <td style="padding:10px; border-bottom:1px solid #eee;">刷新率</td>
                            <td style="padding:10px; border-bottom:1px solid #eee;">可变刷新率（72Hz、90Hz、120Hz）</td>
                        </tr>
                    </table>
                </div>

                <div class="tab-panel">
                    <h3>电脑配置要求</h3>
                    <img src="./images/shopping/配置.png" alt="商品详情" style="width:100%; margin:20px 0;">
                </div>

                <div class="tab-panel">
                    <h3>售后服务</h3>
                    <p>本产品享受7天无理由退货，15天质量问题换货，1年质保服务。</p>
                    <p>售后服务热线：888-888-88888</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 相关商品 -->
    <section class="related-products">
        <div class="container">
            <h2 class="section-title">相关推荐</h2>
            <div class="products-grid">
                <div class="product-card">
                    <img src="./images/shopping/13.webp" alt="相关商品" class="card-image">
                    <div class="card-body">
                        <h3 class="card-title">【预售】Pimax Crystal Super</h3>
                        <div class="card-price">¥6599</div>
                    </div>
                </div>

                <div class="product-card">
                    <img src="./images/shopping/14.webp" alt="相关商品" class="card-image">
                    <div class="card-body">
                        <h3 class="card-title">Pimax Dream Air</h3>
                        <div class="card-price">¥9699</div>
                    </div>
                </div>

                <div class="product-card">
                    <img src="./images/shopping/15.webp" alt="相关商品" class="card-image">
                    <div class="card-body">
                        <h3 class="card-title">Crystal小派水晶</h3>
                        <div class="card-price">¥12999</div>
                    </div>
                </div>

                <div class="product-card">
                    <img src="./images/shopping/16.webp" alt="相关商品" class="card-image">
                    <div class="card-body">
                        <h3 class="card-title">Pimax Portal QLED - 256G</h3>
                        <div class="card-price">¥3999</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->

    <!-- Side -->
    <div id="side">
        <div class="jiantou"><img src="images/index/copylan.png" alt="Return to the top" id="jiantou"></div>
        <div id="setting"><img src="images/index/settinghei.png" alt=""></div>
    </div>
    <!-- Side -->

    <!-- foot -->
    <div id="foot">
        <div class="foot">
            <p>仓库地址：<a href="https://gitee.com/heyi-private/group-7"
                    style="color: white;">https://gitee.com/heyi-private/group-7</a></p>
            <p>组长：胡晓婷 &nbsp;&nbsp; 仓库名：camellia1323</p>
            <p>组员：叶锦钊 &nbsp;&nbsp; 仓库名：叶锦钊</p>
            <p>组员：李伟文 &nbsp;&nbsp; 仓库名：李伟文</p>
            <p>组员：周超 &nbsp;&nbsp; 仓库名：周超</p>
            <p>组员：何志博 &nbsp;&nbsp; 仓库名：heyi</p>
            <p>Copyright © 2025-2025 第七组 版权所有</p>
        </div>
    </div>
    <!-- foot -->

    <script type="text/javascript" src="./JavaScript/shopping.js">

    </script>
</body>

</html>